<template>
  <div id="member">
    <el-col :span="24" class="action-bar">
      <el-select v-model="status" clearable placeholder="审核状态" style="margin:0 20px;">
        <el-option label="待审核" value="0"></el-option>
        <el-option label="通过" value="1"></el-option>
        <el-option label="拒绝" value="2"></el-option>
      </el-select>
      <el-button type="primary" size="medium" @click="search">筛选</el-button>
    </el-col>


    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="circle_name" label="圈子名称"></el-table-column>
      <el-table-column prop="classify_name" label="圈子类型"></el-table-column>
      <el-table-column prop="province" label="地区/省市">
        <template slot-scope="scope">
          {{scope.row.province+scope.row.city}}
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="申请人"></el-table-column>
      <el-table-column prop="phone" label="手机"></el-table-column>
      <el-table-column prop="reason" label="创建圈子理由"></el-table-column>
      <el-table-column prop="created_at" label="提交时间"></el-table-column>
      <el-table-column prop="status" label="审核状态">
        <template slot-scope="scope">
          {{scope.row.status==0?'待审核':''}}
          {{scope.row.status==1?'通过':''}}
          {{scope.row.status==2?'拒绝':''}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" v-if="scope.row.status==0">
          <el-button type='text' @click="passCircleApplication(scope.row.id)" >通过</el-button>
          <el-button type='text' @click="denyCircleApplication(scope.row.id)" >拒绝</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="page"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
    export default {
      name: "CircleExamine",
      data(){
        return{
          tableData:[],
          page: 1,
          limit: 10,
          status: ''
        }
      },
      mounted(){
        this.getCircleApplicationList();
      },
      methods:{
        async getCircleApplicationList(){
          let params = {
            page: this.page,
            limit: this.limit,
            status: this.status
          }
          const res = await this.$api.getCircleApplicationList(params);
          if (res.data.level == 'success') {
            console.log(res.data)
            this.tableData = res.data.data;
            this.page = parseInt(res.data.page_info.page);
            this.limit = parseInt(res.data.page_info.limit);
          }else{
            this.$message({
              type:'error',
              message:res.data.message
            })
          }
        },
        search(){
          this.getCircleApplicationList();
        },
        //拒绝圈子申请
        async denyCircleApplication(id){
          let params = {
            id : id
          }
          const res = await this.$api.denyCircleApplication(params);
          if (res.data.level == 'success'){
            console.log(res)
            this.$message({
              type:'success',
              message:res.data.message
            })
            this.getCircleApplicationList()
          } else{
            this.$message({
              type:'error',
              message:res.data.message
            })
          }
        },
        //批准圈子申请
        async passCircleApplication(id){
          let params = {
            id : id
          }
          const res = await this.$api.passCircleApplication(params);
          if (res.data.level == 'success'){
            console.log(res)
            this.$message({
              type:'success',
              message:res.data.message
            })
            this.getCircleApplicationList()
          } else{
            this.$message({
              type:'error',
              message:res.data.message
            })
          }
        },
        pageChange(e){
          this.page=e;
          this.getCircleApplicationList();
        }
      }
    }
</script>

<style scoped lang="scss">
  .action-bar{
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .action-bar-input{
      width: 250px;
      margin-right: 14px;
    }
    .task-form-text{
      color: #666666;
    }
  }
  .footer-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }
</style>
